<template>
  <div class="receipt-order-print" ref="receiptOrderPrintRef" hidden="hidden">
    <!-- <div class="title">{{ row.shipmentOrderNo }}</div> -->
    <div class="title">东莞隆氏科技有限公司</div>
    <div class="title1">送货单</div>
    <div class="title2">广东省东莞市大岭山镇大塘沿河街2号 {{row.userSelect.label}}-{{ row.userSelect.phone }}</div>
    <div class="summary">
      <!-- <div class="col1">公司地址: 广东省东莞市大岭山镇大塘沿河街2号</div>
      <div class="col1">联系方式: 邹先生-13821236544</div> -->
      <div class="col1">客户名称: {{ row.customer.customerName }} </div>
      <div class="col1">客户地址: {{ row.customer.address }} </div>
      <div class="col1">客户联系方式: {{ row.customer.customerName }}-{{ row.customer.mobile }} </div>
      <div class="col1">订单编号: {{ row.orderNo }} </div>
      <div class="col1">送货单号：{{ row.shipmentOrderNo }}</div>
      <div class="col1">送货日期：{{ this.formattedDate() }} </div>
      <!-- <div class="col1">日期: {{ row.createTime }}</div> -->
    </div>

    <table class="common-table" width="100%">
      <tr>
        <td width="15%" align="center">序号</td>
        <!-- <td width="20%" align="center">送货日期</td> -->
        <td width="30%" align="center">产品编号</td>
        <td width="30%" align="center">产品名称</td>
        <td width="30%" align="center">规格</td>
        <td width="15%" align="center">麦数</td>
        <td width="15%" align="center">单位</td>
        <td width="20%" align="center">数量</td>
        <td width="15%" align="center">单价</td>
        <td width="20%" align="center">金额</td>
        <td width="20%" align="center">备注</td>
      </tr>
      <tr v-for="(item, index) in row.details">
        <td align="center">{{ index + 1 }}</td>
        <!-- <td align="center">2023-12-12</td> -->
        <td align="center">{{ item.itemNo }}</td>
        <td align="center">{{ item.itemName }}</td>
        <td align="center">{{ item.item.productStandard }}</td>
        <td align="center">{{ item.item.productGilding }}</td>
        <td align="center">{{ item.item.unit }}</td>
        <td align="center">{{ item.realQuantity || 0 }}</td>
        <td align="center">{{ isNaN(item.price)?0:item.price }}</td>
        <td align="center">{{ item.money || 0 }}</td>
        <td align="center">{{ item.remark }}</td>
      </tr>
      <tr>
        <!-- <td colspan="3"></td> -->
        <td width="50%" colspan="2" align="center">合计（小写）</td>
        <td width="50%" colspan="3">￥{{ totalAllPrice(row.details) || 0 }}</td>
        <td width="50%" colspan="2" align="center">合计（大写）</td>
        <td width="50%" colspan="4">{{ dealBigMoney(totalAllPrice(row.details)) }}</td>
      </tr>
      <!-- <tr>
        <td colspan="3"></td>
        <td width="50%" colspan="1" align="center">合计（大写）</td>
        <td width="50%" colspan="4"></td>
      </tr> -->
    </table>
    <div class="summary2">
      <div class="col1">仓管: </div>
      <div class="col1">送货单位: </div>
      <div class="col1">客户签收: </div>
    </div>
    <div class="summary1" style="margin-top: 0.5cm;">
      <div class="col11">备注: </div>
      <div class="col1">
        <div>（1）收货单位收货确认后，请签字并加盖公章</div>
        <div>（2）收货单位私人签章与收货单位加盖公章具有同等的法律效力</div>
      </div>
    </div>
    <!-- <div class="foot">
      <div class="col2">备注: {{ row.remark }}</div>
    </div> -->
  </div>
</template>

<script>

export default {
  props: ['row'],
  methods: {
    start() {
      console.log('row+++++++', this.row)
      this.$print(this.$refs.receiptOrderPrintRef, {}, 'A4')
    },
    // 计算总金额
    totalAllPrice(row) {
        let amount = 0
        for (let item of row) {
          amount += parseFloat(item.money)
        }
        console.log(amount)
        return amount;
    },
    // 金额转大写
    dealBigMoney(n) {
      console.log('n++++++',n)
      if(n==0||n==null){
        return '零'
      }
      var fraction = ['角', '分'];
      var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      var unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']];
      var head = n < 0 ? '欠' : '';
      n = Math.abs(n);

      var s = '';

      for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      }
      s = s || '整';
      n = Math.floor(n);

      for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
          p = digit[n % 10] + unit[1][j] + p;
          n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
      }
      return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
    },
    formattedDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;
      console.log(formattedDate);
      return formattedDate;
    }
  }
}
</script>

<style lang="stylus" media="print">
@page {
  size: auto;
  margin: 1cm;
  // margin:0;
}

@media print {
  * {
    color: #000 !important;
  }

  table {
    width 100%
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table, tbody, thead {
    width: 100% !important;
  }

  .receipt-order-print {
    width: 100% !important;
    font-size 14px;
  }

  table, table tr th, table tr td {
    border: 0.05rem solid #000;
    font-size 12px;
  }

}

.receipt-order-print
  line-height: 1.8
  .summary2
    width:100%;
    align:center;
    display flex;
    flex-wrap wrap

    .col1
      font-size 12px;
      width 33%;
  .summary1
    width 100%;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    .col11
      font-size 12px;

  .summary
    width 100%;
    align:center;
    display flex
    flex-wrap wrap;
    .col1
      font-size 12px;
      width 33%;
  .title1
    width:100%;
    font-size 22px;
    font-weight:bold;
    text-align center
  .title2
    width:100%;
    font-size: 12px;
    text-align center;

  .title
    width:100%;
    font-size 30px
    font-weight:bold;
    text-align center

  .common-table
    td, th
      border-color black
</style>
